<template>
  <section class="IconButton">
    <div class="wrapper">
        <div class="icon-item normal-btn" v-if="exists.indexof('question') >= 0">
            <!-- //判断数组中是否有当前按钮的名称，若有，则显示i;若没有，则不渲染 -->
            <i class="el-icon-tickets big-icon"></i>
            <p>写回答</p>
        </div>  
        <div class="icon-item normal-btn" v-if="exists.indexof('article') >=0">
            <i class="el-icon-edit-outline big-icon"></i>
            <p>写文章</p>
        </div>
        <div class="icon-item normal-btn" v-if="exists.indexof('thinking') >=0">
            <i class="el-icon-edit-thinking big-icon"></i>
            <p>写想法</p>
        </div>
        <div class="icon-item normal-btn" v-if="exists.indexof('live') >=0">
            <i class="el-icon-fakezhihu-live big-icon"></i>
            <p>live</p>
        </div>
        <div class="icon-item normal-btn" v-if="exists.indexof('book') >=0">
            <i class="el-icon-fakezhihu-book big-icon"></i>
            <p>书店</p>
        </div>
         <div class="icon-item normal-btn" v-if="exists.indexof('desk') >=0">
            <i class="el-icon-fakezhihu-desk big-icon"></i>
            <p>圆桌</p>
        </div>
         <div class="icon-item normal-btn" v-if="exists.indexof('expert') >=0">
            <i class="el-icon-fakezhihu-pen big-icon"></i>
            <p>专栏</p>
        </div>
         <div class="icon-item normal-btn" v-if="exists.indexof('consult') >=0">
            <i class="el-icon-fakezhihu-money big-icon"></i>
            <p>付费咨询</p>
        </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'IconButton',
  data() {
    return {
        props: ['exists'], //传入exists参数，包含了展示ICON的名称
    }
  },
  components: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>

</style>
